<template>
	<view :style="{height:windowHeight+'px'}" class="content">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="在线报修" @clickLeft="back" />
		<view>
			<uni-forms ref="baseForm" :modelValue="baseFormData"  style="padding: 0.5rem;" label-width='80px'>
				<view style="padding: 0.5rem;">
					<uni-forms-item label="问题类型" >
						<uni-data-checkbox v-model="baseFormData.hobby"  :localdata="hobbys" />
					</uni-forms-item>
					<uni-forms-item label="定位"  >
						<view class="buttonStyle"  @click="getStation">
							<uni-icons type="location-filled" color="white" size="20"></uni-icons>
							<text>点击定位</text>
						</view>
					</uni-forms-item>
					<uni-forms-item label="定位坐标" required>
						<uni-easyinput v-model="baseFormData.latlog" placeholder="请点击定位获取经纬度" disabled=""/>
					</uni-forms-item>
					<uni-forms-item label="详细信息">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入详细信息" />
					</uni-forms-item>
					
					<uni-forms-item label="问题描述" required="">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入问题描述" />
					</uni-forms-item>
					<uni-forms-item label="上传图片(最多6张)">
							<view class="img-box">
								<!-- 图片列表 -->
								<block v-if="imgList.length>0">
									<view class="img-item" v-for="(item,index) in imgList" :key="index">
										<image class="img" lazy-load="true" :src="item" @tap="preImg(index)"></image>
										<view class="img-delete-box" @tap="deImg(index)">
											<!-- <image class="img-delete-icon" lazy-load="true" src=""></image> -->
										</view>
									</view>
								</block>
								<!-- 上传图标 -->
								<view class="img-item upload-icon" @tap="upBtn()"></view>
							</view>
					</uni-forms-item>
					
				</view>
				<view style="height: 50px;"></view>
			</uni-forms>
		</view>
			
			
			
			
			
			
		<view class="btnStyle">
			<view class="btnDiv">
				<button type="primary" plain="true">提交</button>
				<button plain="true">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				imgList: [],
			// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: 0,
					datetimesingle: 1627529992399,
					latlog:''
				},
				// 单选数据源
								sexs: [{
									text: '否',
									value: 0
								}, {
									text: '是',
									value: 1
								}],
				// 多选数据源
							hobbys: [{
								text: '垃圾站报修1',
								value: 0
							}, {
								text: '垃圾站报修2',
								value: 1
							}],
			
			
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		
			callPhone() {
		      // 电话号码为示例，请替换为实际需要拨打的电话号码
		      uni.makePhoneCall({
		        phoneNumber: '13462013124', // 电话号码
		        success: function () {
		          console.log('拨号成功');
		        },
		        fail: function () {
		          console.log('拨号失败');
		        }
		      });
		    },
			// 上传图片
						upBtn() {
							var that = this
							uni.chooseImage({
								count: 6, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									console.log(res.tempFilePaths);
									that.imgList = that.imgList.concat(res.tempFilePaths)
									console.log("that.imgList", that.imgList)
								}
							});
						},
						// 删除图片
						deImg(index) {
							this.imgList.splice(index, 1)
						},
						// 预览图片
						preImg(index) {
							uni.previewImage({
								current: index,
								urls: this.imgList
							})
						},
						getStation(){
							uni.getLocation({
							  type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
							  success: function(res) {
								  this.baseFormData.latitude = ''+res.latitude+','+''+res.longitude+''
							    // console.log('当前位置的经度：' + res.longitude);
							    // console.log('当前位置的纬度：' + res.latitude);
							  }
							});
						}
		
		
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btnStyle{
			position: fixed;bottom: 0rem;width: 100%;display: flex;    align-items: center;padding: 1rem 0;
			justify-content: center;
			background-color: white;
			.btnDiv{
				width: 80%;
				display: flex;
				button{
					flex: 1;
					grid-column: 1;
					margin: 0 5px;
				}
			}
		}
		.ml5{
			display: inline-block;margin-left: 1rem;
		}
		
		.img-box {
					display: flex;
					flex-wrap: wrap;
		
					.img-item {
						width: 150rpx;
						height: 150rpx;
						position: relative;
						box-sizing: border-box;
						margin: 15rpx;
		
						.img {
							width: 100%;
							height: 100%;
						}
		
						.img-delete-box {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							right: 0;
							top: 0;
		
							.img-delete-icon {
								width: 100%;
								height: 100%;
							}
						}
		
					}
		
					.upload-icon {
						box-sizing: border-box;
						border: 2rpx solid #bfbfbf;
					}
		
					.upload-icon:before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 60rpx;
						height: 6rpx;
						background-color: #bfbfbf;
						margin: -3rpx 0 0 -30rpx;
						border-radius: 5rpx;
					}
		
					.upload-icon::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 6rpx;
						height: 60rpx;
						background-color: #bfbfbf;
						margin: -30rpx 0 0 -3rpx;
						border-radius: 5rpx;
					}
		
					.img-item:nth-child(4n+1) {
						margin-left: 0;
					}
		
					.img-item:nth-child(4n+4) {
						margin-right: 0;
					}
				}
				.buttonStyle{
					color: white;
					background-color: #0289FF;
					width: 6rem;
					height: 2rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 5px;
				}

	}
</style>
